import React from 'react';
import { Modal, Tag } from 'antd';
import { Coupon } from '@/types/coupon';

interface CouponDetailModalProps {
  visible: boolean;
  coupon: Coupon | null;
  onClose: () => void;
}

const CouponDetailModal: React.FC<CouponDetailModalProps> = ({
  visible,
  coupon,
  onClose
}) => {
  if (!coupon) return null;

  const statusMap = {
    valid: { color: 'success', text: '有效' },
    used: { color: 'warning', text: '已使用' },
    expired: { color: 'error', text: '已过期' }
  };

  const { color, text } = statusMap[coupon.status];

  return (
    <Modal
      title="优惠券详情"
      open={visible}
      onCancel={onClose}
      footer={null}
      width={600}
    >
      <div className="coupon-preview mb-4">
        <div className="coupon-content">
          <div>
            <div className="coupon-title">{coupon.name}</div>
            <div className="coupon-desc">{coupon.description}</div>
          </div>
          <div className="coupon-value">{coupon.value}</div>
          <div className="coupon-code">{coupon.code}</div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-4">
        <div>
          <div className="form-group">
            <label className="form-label">ID</label>
            <div>{coupon.id}</div>
          </div>
        </div>
        <div>
          <div className="form-group">
            <label className="form-label">创建时间</label>
            <div>{coupon.createTime}</div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-4">
        <div>
          <div className="form-group">
            <label className="form-label">有效期至</label>
            <div>{coupon.expiry}</div>
          </div>
        </div>
        <div>
          <div className="form-group">
            <label className="form-label">使用门槛</label>
            <div>{coupon.limit}</div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-4">
        <div>
          <div className="form-group">
            <label className="form-label">适用产品</label>
            <div>{coupon.products}</div>
          </div>
        </div>
        <div>
          <div className="form-group">
            <label className="form-label">生成管理员</label>
            <div>{coupon.admin}</div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 gap-4 mb-4">
        <div>
          <div className="form-group">
            <label className="form-label">使用状态</label>
            <div>
              <Tag color={color}>{text}</Tag>
            </div>
          </div>
        </div>
      </div>

      {coupon.status === 'used' && coupon.userPhone && (
        <div className="mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
          <h3 className="text-lg font-semibold mb-2">使用信息</h3>
          <div className="grid grid-cols-2 gap-4">
            <div className="form-group mb-0">
              <label className="form-label">使用人手机</label>
              <div>{coupon.userPhone}</div>
            </div>
            <div className="form-group mb-0">
              <label className="form-label">使用时间</label>
              <div>{coupon.useTime}</div>
            </div>
          </div>
        </div>
      )}

      <div className="form-group mb-4">
        <label className="form-label">描述</label>
        <div>{coupon.description}</div>
      </div>
    </Modal>
  );
};

export default CouponDetailModal; 